<template>
	<div class="mes">
		<div class="mes_top">
			<p style="text-align: right;"><i class="el-icon-setting"></i></p>
			<div class="zhu">
				注册 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;登录
			</div>			
		</div>
		<!--订单-->
		<div class="dingdan">
			<dl>
				<dt><i class="el-icon-picture"></i></dt>
				<dd style="margin-left: 10px;">待支付</dd>
			</dl>
			<dl>
				<dt><i class="el-icon-picture"></i></dt>
				<dd style="margin-left: 10px;">待收货</dd>
			</dl>
			<dl>
				<dt><i class="el-icon-picture"></i></dt>
				<dd style="margin-left: 10px;">全部订单</dd>
			</dl>
		</div>
		
			<div class="zong">
				<div class="zong_li">
					<p>账户管理</p><i class="el-icon-arrow-right"></i>
				</div>
				<div class="zong_li">
					<p>我的卡卷</p><i class="el-icon-arrow-right"></i>
				</div>
				<div class="zong_li">
					<p>我的关注</p><i class="el-icon-arrow-right"></i>
				</div>
				<div class="zong_li">
					<p>我的足迹</p><i class="el-icon-arrow-right"></i>
				</div>
			</div>
		
		<div class="zong">
				<div class="zong_li">
					<p>在线客服</p><i class="el-icon-arrow-right"></i>
				</div>
				<div class="zong_li">
					<p>联系客服</p><i class="el-icon-arrow-right"></i>
					<div class="dinwei">
						400-707-6888
					</div>
				</div>
				<div class="zong_li">
					<p>意见反馈</p><i class="el-icon-arrow-right"></i>
				</div>
				
			</div>
  
</div>
</template>

<script>
 export default {
    data() {
      return {
        activeNames: ['1']
      }
    },
    methods:{
    	handleChange:function(){
    		console.log('')
    	}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mes{
		margin-top: 35px;
		background: #ccc;
	}

.mes_top{
	width: 100%;
	height: 200px;
	display: flex;
	flex-direction: column;
	background: white;
	}
	
.zhu{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}
.dingdan{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	margin-top: 1px;
	
}
.dingdan dl{
	width: 33%;
	height: 100%;
	background: white;
	display: flex;
	flex-direction: row;
	line-height: 50px;
	justify-content: center;
}
.zong{
	width: 100%;
	margin-top: 10px;
	display: flex;
	flex-direction:column;
}
.zong_li{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 50px;
	background: white;
	padding: 0 5px;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 1px;
}
.dinwei{
	position: absolute;
	right: 30px;
	color: #666;
}
</style>
